<template>
  <div class="dashBoard">
    <el-row :gutter="10">
      <el-col :span="6">
        <div style="height: 200px;background: #12dc09">内容1</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background: #d100a6">内容2</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background: #c090aa">内容3</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background: #456789">内容4</div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div ref="chart1" style="height: 400px"></div>
      </el-col>
      <el-col :span="12">
        <baidu-map class="map"  center="合肥" scroll-wheel-zoom :zoom="15">
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-local-search keyword="银行" :auto-viewport="true" :panel="false"></bm-local-search>
        </baidu-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'dashBoard',
  data () {
    return {
      // 1data中定义 实例初始值
      chart1: null,
      chart1Options: {
        title: {
          text: 'ECharts 入门示例{a|标签内容}',
          textStyle: {
            color: 'red',
            rich: {
              a: {
                width: 50,
                height: 50,
                backgroundColor: {
                  image: 'https://img2.baidu.com/it/u=1261323646,1888852257&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
                }
              }
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisLabel: {
            color: 'blue',
            rotate: 45,
            margin: 20
          }
        },
        legend: {},
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            smooth: true,
            type: 'line',
            data: [15, 2, 45, 5, 8, 34]
          }
        ]
      }
    }
  },
  methods: {
    // 2 methods定义一个方法 初始化 图表
    initChart1 () {
      this.chart1 = this.$echarts.init(this.$refs.chart1)
      this.chart1.setOption(this.chart1Options)
    }
  },
  // 3mounted中调用初始化函数
  mounted () {
    this.initChart1()
  }
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 400px;
}
</style>
